<template>
  <div class="execution">
    <basic-container>
      <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="addColumn()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div class="table-container" style="margin-top: 20px">
        <el-table
          border
          :data="list"
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }">
          <el-table-column
            label="栏目名称"
            prop="name"
            align="center"></el-table-column>
          <el-table-column
            label="编辑人"
            prop="editName"
            align="center"></el-table-column>
          <el-table-column
            label="新增时间"
            min-width="120"
            prop="createTime"
            align="center"></el-table-column>
          <el-table-column
            label="编辑时间"
            min-width="120"
            prop="updateTime"
            align="center"></el-table-column>
          <el-table-column label="操作" min-width="150">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleDelete(scope.$index, scope.row)" plain>删除</el-button>
              <el-button size="small" type="text" @click="handleEdit(scope.$index, scope.row)" plain>编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="50%">
        <el-form ref="productAttr" :model="productAttr" :rules="rules" label-width="120px">
          <el-form-item label="栏目名称" prop="name">
            <el-input v-model="productAttr.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleConfirm('productAttr')">确 定</el-button>
            <el-button  type="info" @click="resetForm('productAttr')">重置</el-button>
          </el-form-item>
        </el-form>

      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import { columnPage,delColumn,updateColumn,addColumn } from "@/api/found/index";
const defaultProductAttr = {
  name: null,
  id: null,
};
export default {
  data() {
    return {
      list: [],
      listQuery: {
        current: 1,
        size: 10,
        name: ''
      },
      total: 0,
      dialogTitle: '',
      dialogVisible: false,
      productAttr: Object.assign({}, defaultProductAttr),
      rules: {
        name: [
          { required: true, message: '请输入规格名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      columnPage(this.listQuery).then(res => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
      })
    },
    addColumn() {
      this.dialogTitle = "添加";
      this.dialogVisible = true
    },
    handleEdit(index,row) {
      this.dialogTitle = "编辑";
      this.dialogVisible = true
      this.productAttr.name = row.name;
      this.productAttr.id = row.id;
    },
    handleConfirm(formName) {
        this.$refs[formName].validate((valid) => {
          if(valid) {
            if(this.dialogTitle === "编辑") {
              let param = {
                name: this.productAttr.name,
                id : this.productAttr.id
              }
              updateColumn(param).then(res => {
                if (res.data.code == 200) {
                  this.dialogVisible = false;
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                    duration: 1000,
                  });
                  this.productAttr = Object.assign({}, defaultProductAttr);
                  this.getList();
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "warning",
                    duration: 1000,
                  });
                }
              })

            }else {
              let params = {
                name: this.productAttr.name
              }
              addColumn(params).then(res => {
                if (res.data.code == 200) {
                  this.dialogVisible = false;
                  this.$message({
                    message: res.data.msg,
                    type: "success",
                    duration: 1000,
                  });
                  this.productAttr = Object.assign({}, defaultProductAttr);
                  this.getList();
                } else {
                  this.$message({
                    message: res.data.msg,
                    type: "warning",
                    duration: 1000,
                  });
                }
              })
            }
          }
        })
      },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.productAttr = Object.assign({}, defaultProductAttr);
    },
    handleDelete(index,row) {
      const that = this;
      that.$confirm("确认要删除" , "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        delColumn({id: row.id}).then(res => {
          if (res.data.code == 200) {
            that.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            that.getList();
          } else {
            that.$message({
              message: res.data.msg,
              type: "warning",
              duration: 1000,
            });
          }
        })
      })
    }
  }
}
</script>
